<template>
	<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="650px">
		<h5 class="text-center" style="margin-top:10px">开启自动充值，防止业务停滞</h5>
		<div class="flex justify-center" style="margin-top:20px;margin-bottom:10px">
			<p v-if="type==2" class="font-12 color-666 flex align-center">
				<img style="width:18px;height:18px;margin-right:7px" src="../../../assets/images/tip3.png"
					alt="">随时随地，短信提醒
			</p>
			<p class="font-12 color-666 flex align-center" :style="{marginLeft:type==2?'80px':'0'}">
				<img style="width:18px;height:18px;margin-right:7px" src="../../../assets/images/tip1.png"
					alt="">防止欠费，避免损失
			</p>
			<p class="font-12 color-666 flex align-center" style="margin-left:80px">
				<img style="width:18px;height:18px;margin-right:7px" src="../../../assets/images/tip2.png"
					alt="">减少操作，省时省力
			</p>
		</div>
		<div class="form_info">
			<div class="form_item">
				<label>充值方式：</label>
				<div class="flex-1 flex align-center">
					{{type==1?'合同': type==2?'短信': '风控'}}{{type!=3?'余量':'次数'}}小于
					<el-input style="width:90px;margin-left:10px" placeholder="10" v-model="formData.baseline" clearable
						@input="val=>changeNumberInput('baseline',val)">
					</el-input>
					<span class="suffix" style="margin-right:10px">{{type!=3?'条':'次'}}</span>
					时自动充值
					<el-input style="width:90px;margin-left:10px" placeholder="100" v-model="formData.recharge_num"
						clearable @blur="calculate" @input="val=>changeNumberInput('recharge_num',val)">
					</el-input>
					<span class="suffix">{{type!=3?'条':'次'}}</span>
				</div>
			</div>
			<div class="form_item">
				<label>花费金额：</label>
				<p class="flex-1">
					{{infoData.pay_total}}元<span class="color-999">（{{type==1?infoData.contract:
					type==2?infoData.sms_amount:
					
					infoData.risk_credit_price}}元/{{type!=3?'条':'次'}}）</span>
				</p>
			</div>
			<div class="form_item">
				<label>账户余额：</label>
				<div class="flex-1 flex"><span style="margin-right:20px">{{infoData.shop_balance}}元</span>
					<p>余额不足？<span class="blue-font pointer" @click="goToRecharge">去充值</span></p>
				</div>
			</div>
			<div class="form_item">
				<label>短信提示：</label>
				<div class="flex-1">
					<el-radio v-model="formData.sms_remind" :label="1">开启</el-radio>
					<el-radio v-model="formData.sms_remind" :label="0">关闭</el-radio>
					<span class="color-999"
						style="margin-left:10px">{{type==1?'开启后将在短信增值服务自动开启':'开启后，账户金额不足将短信提醒'}}</span>
				</div>
			</div>
			<el-divider></el-divider>
			<div class="form_item">
				<label v-if="type!=3">短信提示：</label>
				<div class="flex-1 rule_tip">
					<template v-if="type==1">
						1. 系统每日定时检查一次余量，满足条件则自动充值。<br />
						2. 优先使用可用现金付款，若账户余额不足，则无法充值。<br />
						3. 短信提醒开启后，扣款金额不足时将短信通知店铺联系人。
					</template>
					<template v-if="type==2">
						1. 系统每日定时检查一次余量，满足条件则自动充值。<br />
						2. 充值金额将从账户余额扣除，若账户余额不足，则无法充值。<br />
						3. 短信提醒开启后，扣款金额不足时将短信通知店铺联系人。
					</template>
				</div>
			</div>
		</div>
		<p style="padding-left:50px;margin-top:20px;margin-bottom:10px">
			<el-checkbox :class="{'check_form':showError}" v-model="checked" @change="showError=false">开启及同意<span
					class="blue-font">《增值服务自动充值协议》</span></el-checkbox>
		</p>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="dialogVisible = false">取 消</el-button>
			<el-button size="small" type="primary" @click="submit">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		autoRechargeInfo,
		autoRecharge,
		riskCreditAutoRecharge
	} from "@/api/marketing";
	export default {
		props: {
			dialogTitle: {
				type: String
			},
			type: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				dialogVisible: false,
				formData: {
					baseline: '',
					recharge_num: '',
					recharge_type: 1,
					sms_remind: 1
				},
				infoData: {},
				showError: false,
				checked: false
			}
		},
		methods: {
			goToRecharge() {
				let routeData = this.$router.resolve({
					name: "recharge"
				});
				window.open(routeData.href, '_blank');
			},
			submit() {
				if (!this.formData.baseline) {
					if (this.type != 3) {
						this.$message({
							message: "请输入余量底线",
							type: "warning"
						});
						return;
					} else {
						this.$message({
							message: "请输入最低次数",
							type: "warning"
						});
						return;
					}
				}
				if (!this.formData.recharge_num) {
					this.$message({
						message: "请输入自动充值条数",
						type: "warning"
					});
					return;
				}
				if (this.infoData.pay_total > parseFloat(this.infoData.shop_balance)) {
					this.$message({
						message: "余额不足，请先充值",
						type: "warning"
					});
					return;
				}
				if (!this.checked) {
					this.$message({
						message: "请勾选开启并同意自动充值协议",
						type: "warning"
					});
					this.showError = true;
					return
				}
				this.formData.recharge_type = this.type;
				if (this.type != 3) {
					autoRecharge(this.formData).then(res => {
						this.dialogVisible = false;
						this.$emit('getList');
					});
				} else {
					riskCreditAutoRecharge(this.formData).then(res => {
						this.dialogVisible = false;
						this.$emit('getList');
					})
				}
			},
			calculate() {
				let num = this.formData.recharge_num || 0;
				let price = 0;
				if (this.type == 1) {
					price = parseFloat(this.infoData.contract);
				} else if (this.type == 2) {
					price = parseFloat(this.infoData.sms_amount);
				} else {
					price = parseFloat(this.infoData.risk_credit_price)
				}
				this.$set(this.infoData, 'pay_total', (price * parseInt(num)).toFixed(2));
			},
			getData() {
				autoRechargeInfo(this.type).then(res => {
					this.infoData = {
						...res
					} || {};
					this.calculate();
				})
			},
			changeNumberInput(key, value) {
				const pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
				// 不符合正整数时
				if (!pattern.test(value)) {
					// input 框绑定的内容为空
					this.formData[key] = ''
				}
			}
		},
		watch: {
			dialogVisible(val) {
				if (val) {
					this.getData();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form_info {
		padding: 20px 30px;
		background: #f5f5f5;

		/deep/.el-divider--horizontal {
			margin: 10px 0;
		}
	}

	.suffix {
		width: 28px;
		height: 28px;
		background: #e6e6e6;
		border-radius: 0px 3px 3px 0px;
		box-sizing: border-box;
		line-height: 28px;
		text-align: center;
	}

	.check_form {
		/deep/.el-checkbox__inner {
			border-color: #ff4146;
		}
	}

	.form_item {
		display: flex;
		line-height: 35px;

		&>label {
			width: 100px;
			color: #666666;
		}

		/deep/.el-input__inner {
			height: 28px;
			border-radius: 3px 0px 0px 3px;
		}

		/deep/.el-input__icon {
			line-height: 28px;
		}
	}
</style>
